<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
    <div id="app">
      <h1>{{hk}}</h1>
      <h1>使用混入的主题的数据： {{theme}}</h1>
      <h1 @click="changeTheme('蓝色')">计算属性：{{themeStr}}</h1>
      <h1>{{myname}}</h1>
   
    </div>
    <script src="./vue.js"></script>
   
    <script type="module">
    
      // 全局注册一个混入，影响注册之后所有创建的每个 Vue 实例
      // 混入内容和本组件的内容 发生冲突 执行哪一方
      // 保留本组件的 数据 计算属性 函数  生命周期等
      import Theme from './theme.js' 
        new Vue({
           mixins:[Theme],
           el:"#app",
           data(){
            return {
              hk:"香港",
              myname:"哈里斯"
            }
           },
           mounted() {
              console.log("本组建加载完毕")
           },
        })
    </script>
</body>
</html>